<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      body {
        display: flex;
        column-gap: 20px;
      }
      
      .box {
        position: relative;
        width: 200px;
        height: 200px;
        padding: 20px;
        border-radius: 20px;
        border: 1px solid black;
      }
      
      .title {
        position: absolute;
        width: calc(100% - 40px);
        text-align: center;
        color: red;
      }
      
      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="title">contain</div>
      <img src="static/syx.jpg" style="object-fit: contain">
    </div>
    
    <div class="box">
      <div class="title">cover</div>
      <img src="static/syx.jpg" style="object-fit: cover">
    </div>
    
    <div class="box">
      <div class="title">fill</div>
      <img src="static/syx.jpg" style="object-fit: fill">
    </div>
    
    <div class="box">
      <div class="title">none</div>
      <img src="static/syx.jpg" style="object-fit: none">
    </div>
    
    <div class="box">
      <div class="title">scale-down</div>
      <img src="static/syx.jpg" style="object-fit: scale-down">
    </div>
  </body>
</html>